/**
 * Descriptions：
 * <p>
 * Author：ChenME
 * Date：2017/6/28
 * Email：ibelieve1210@163.com
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
} from 'react-native';
class CommCellMine extends Component {

    static defaultProps = {
        leftIconName: '',
        leftText: '',
        rightIconName: '',
        rightText: '',
    };

    render() {
        return (
            <TouchableOpacity activeOpacity={0.80}>
                <View style={styles.itemStyle}>
                    {/*左边*/}
                    <View style={styles.leftViewStyle}>
                        <Image
                            source={{uri: this.props.leftIconName}}
                            style={styles.leftIconStyle}
                        />

                        <Text style={styles.leftTextStyle}>{this.props.leftText}</Text>
                    </View>

                    {/*右边*/}
                    {this.renderRightView()}
                </View>
            </TouchableOpacity>
        );
    }

    renderRightView() {
        return <View style={styles.rightViewStyle}>
            {this.renderRightSubView()}
            <Image
                source={{uri: 'icon_cell_rightarrow'}}
                style={styles.rightArrowStyle}
            />
        </View>
    }

    renderRightSubView() {
        if (this.props.rightIconName.length === 0) {
            return <Text>{this.props.rightText}</Text>
        } else {
            //返回图片
            return <Image
                source={{uri: this.props.rightIconName}}
                style={{width: 24, height: 13}}
            />;
        }
    }

}

const styles = StyleSheet.create({
    itemStyle: {
        flexDirection: 'row',
        height: 40,
        backgroundColor: '#fff',
        borderBottomColor: '#ddd',
        borderBottomWidth: 0.5,
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 10,
    },

    leftViewStyle: {
        flexDirection: 'row',
        alignItems: 'center',
    },

    leftIconStyle: {
        height: 30,
        width: 30,
        borderRadius: 15,
    },

    leftTextStyle: {
        fontSize: 16,
        marginLeft: 10,
    },

    rightViewStyle: {
        flexDirection: 'row',
        alignItems: 'center',
    },

    rightArrowStyle: {
        width: 8,
        height: 13,
        marginLeft: 7,
    },
});

export {CommCellMine};